<template>
	<div class="content">
		<common-head :showIcon="false"></common-head>
		<!-- 新增固定按钮 -->
		<van-button class="add-btn" type="primary" round @click="$router.push('/messageAdd')">
			新增
		</van-button>
		<div class="container">
			<div class="message-container">
				<div v-for="(message, index) in messages" :key="index" class="message-card"
					:class="{ 'device-warning': message.errorType === '40' }">
					<div class="message-header">
						<h4>{{ getErrorTypeLabel(message.errorType) }}</h4>
					</div>
					<div class="message-content">
						<div class="fixed-info">
							<div class="info-first">停车点：{{ message.parkingId }}</div>
							<div>泊位：{{ message.carportCode }}</div>
						</div>
						<div class="dynamic-info">
							<template v-if="message.errorType === '10'">
								<div>入场时间：{{ message.startTime }}</div>
							</template>

							<template v-else-if="message.errorType === '40'">
								<div class="info-first">设备编码：{{ message.deviceCode }}</div>
								<div>设备类型：{{ message.deviceType }}</div>
								<div>异常内容：{{ message.errorContent }}</div>
							</template>

							<template v-else-if="message.errorType === '20'">
								<div>车牌号码：{{ message.carNumber }}</div>
								<div>入场时间：{{ message.startTime }}</div>
								<div>历史欠费金额：{{ message.arrearAmount }}元</div>
							</template>

							<template v-else>
								<div>未知异常类型</div>
							</template>
						</div>
					</div>
					<div class="message-footer">
						<van-button class="btn" type="primary" size="small"
							@click="handleMessage(message)">去处理</van-button>
					</div>
				</div>
			</div>

			<van-pagination v-model="pageNo" :page-count="Math.ceil(total / pageSize)" :items-per-page="pageSize"
				mode="simple" @change="handlePageChange" v-if="!loading && total > 0" class="pagination" />
		</div>
	</div>
</template>

<script>
	import commonHead from "../../components/xc/commonHead.vue";
	import {
		Button
	} from "vant";

	export default {
		components: {
			[Button.name]: Button,
			commonHead
		},
		data() {
			return {
				messages: [],
				pageNo: 1,
				pageSize: 5,
				total: 0,
				loading: false
			};
		},
		methods: {
			getErrorTypeLabel(errorType) {
				switch (errorType) {
					case '10':
						return '无牌车入场';
					case '20':
						return '欠费车入场';
					case '30':
						return '僵尸车';
					case '40':
						return '设备异常';
					default:
						return '其他异常';
				}
			},
			
			// 分页变化处理
			  handlePageChange(newPage) {
			    this.pageNo = newPage;
			    this.getNoticeData();
			    // 滚动到顶部提升体验
			    document.querySelector('.container').scrollTo(0, 0);
			  },

			async getNoticeData() {
				try {
					this.loading = true;
					const queryParams = [
						`pageNo=${this.pageNo}`,
						`pageSize=${this.pageSize}`
					];

					const response = await this.baseService.get(
						`/parking/bizParkingError/list?${queryParams.join('&')}`);

					if (response.code === 200) {
						this.messages = response.result.records;
						this.total = response.result.total;
					} else {
						this.$toast("获取消息失败");
					}
				} catch (error) {
					console.error("获取消息失败: ", error);
					this.$toast("获取消息失败");
				} finally {
					this.loading = false;
				}
			},

			handleMessage(message) {
				switch (message.errorType) {
					case "10":
						this.handleNoPlate(message);
						break;
					case "20":
						this.handleUnpaid(message);
						break;
					case "40":
						this.handleDeviceWarning(message);
						break;
					default:
						console.log("暂不支持该类型处理");
						this.$toast("暂不支持该类型处理");
				}
			},

			handleNoPlate(message) {
				this.$router.push({
					name: "noPlate",
					params: {
						message
					}
				});
			},

			handleDeviceWarning(message) {
				this.$router.push({
					name: "deviceWarning",
					params: {
						message
					}
				});
			},

			handleUnpaid(message) {
				this.$router.push({
					name: "unpaid",
					params: {
						noticeId: message.id,
						car_number: message.carNumber,
						arrears_fees: message.arrearAmount
					}
				});
			}
		},
		created() {
			this.getNoticeData();
		}
	};
</script>

<style lang="less" scoped>
	.content {
		height: 91vh;
		// width: 100vw;
		/* 新增：确保宽度占满视口 */
		overflow-x: hidden;
		/* 新增：防止横向滚动 */
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
	}

	// 新增按钮样式
	.add-btn {
		position: fixed;
		right: 20px;
		bottom: 80px;
		z-index: 999;
		width: 70px;
		height: 70px;
		font-size: 12px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

		// &::before {
		// 	content: '';
		// 	display: block;
		// 	width: 30px;
		// 	height: 30px;
		// 	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512zm-32-544H288a32 32 0 1 1 0-64h192V224a32 32 0 1 1 64 0v192h192a32 32 0 1 1 0 64H544v192a32 32 0 1 1-64 0V480z" fill="white"/></svg>') center no-repeat;
		// 	background-size: contain;
		// 	margin: 0 auto;
		// }
	}

	.container {
		flex: 1;
		// width: 100%;
		/* 确保宽度继承 */
		box-sizing: border-box;
		/* 关键：包含padding在宽度内 */
		padding: 10px;
		padding-bottom: 70px;
		overflow-y: auto;
	}

	.message-container {
		flex: 1;
		/* 消息区域填充剩余空间 */
		background-color: white;
		border-radius: 8px;
		padding: 10px;
		// width: 100%;
	}

	.device-warning {
		background-color: #f8e0e0 !important;
		// border: 2px solid #ff5252;
	}

	.message-card {
		background-color: rgb(219, 234, 254);
		border-radius: 0.2rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: 0.5rem;
		padding: 0.2rem 0.5rem;
	}

	.message-header {
		margin-bottom: 5px;
	}

	.message-content {
		margin-bottom: 10px;
	}

	.fixed-info {
		margin-bottom: 5px;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.fixed-info div {
		margin: 5px 0;
		font-size: 0.3rem;
		color: #666;
		flex: 1;
	}

	.dynamic-info div {
		margin: 5px 0;
		font-size: 0.3rem;
		color: #666;
		flex: 1;
	}

	.info-first {
		width: 50%;
	}

	.message-footer {
		text-align: center;
	}

	.van-button--primary {
		background-color: #1989fa;
		border-color: #1989fa;
	}

	.btn {
		width: 90%;
	}

	/* 新增分页样式（从UnPay.vue复制） */
	.pagination {
		margin: 15px 0;
		justify-content: center;

		/deep/ .van-pagination__item {
			background: #fff;

			&--active {
				background: #1890ff;
				color: white;
			}
		}
	}
</style>